<template>
  <view class="container min-h-screen bg-gradient-to-b from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800 text-gray-800 dark:text-gray-100 transition-colors duration-300">
    <!-- 顶部导航栏 -->
    <view class="navbar bg-primary/95 text-white px-4 py-4 flex justify-between items-center shadow-md backdrop-blur-sm sticky top-0 z-50">
      <view class="flex items-center">
        <i class="fa fa-server text-2xl mr-3"></i>
        <text class="text-xl font-bold tracking-wide">Tshock服务器管理</text>
      </view>
      <button 
        class="bg-white/20 hover:bg-white/30 text-white px-4 py-2 rounded-full flex items-center transition-all duration-300 transform hover:scale-105 shadow-md"
        @click="showAddModal = true"
      >
        <i class="fa fa-plus mr-2"></i>
        <text>添加服务器</text>
      </button>
    </view>

    <!-- 搜索栏 -->
    <view class="search-bar px-4 py-4 bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm shadow-sm">
      <view class="flex items-center border border-gray-300 dark:border-gray-600 rounded-xl px-4 py-3 bg-white dark:bg-gray-700 shadow-inner">
        <i class="fa fa-search text-gray-400 mr-3 text-lg"></i>
        <input 
          type="text" 
          placeholder="搜索服务器名称或IP地址" 
          v-model="searchKey"
          @input="debounceSearch"
          class="flex-1 outline-none bg-transparent placeholder-gray-400"
        />
        <button v-if="searchKey" @click="clearSearch" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors">
          <i class="fa fa-times-circle"></i>
        </button>
      </view>
    </view>

    <!-- 服务器列表 -->
    <view class="server-list px-4 py-6">
      <!-- 统计信息 -->
      <view v-if="servers.length > 0 && !loading && !errorMsg" class="mb-6 flex justify-between items-center">
        <text class="text-gray-600 dark:text-gray-400 font-medium">
          共 {{ servers.length }} 台服务器
        </text>
        <view class="flex items-center space-x-2">
          <text class="text-sm text-gray-500 dark:text-gray-500">排序:</text>
          <select v-model="sortOption" @change="sortServers" class="bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-1 text-sm outline-none">
            <option value="name-asc">名称 (A-Z)</option>
            <option value="name-desc">名称 (Z-A)</option>
            <option value="recent">最近添加</option>
          </select>
        </view>
      </view>

      <!-- 加载状态 -->
      <view v-if="loading" class="flex justify-center items-center py-20">
        <view class="loading-spinner"></view>
        <text class="ml-3 text-gray-500 dark:text-gray-400">加载服务器列表中...</text>
      </view>

      <!-- 错误提示 -->
      <view v-if="errorMsg" class="py-20 text-center">
        <view class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-red-100 dark:bg-red-900/30 text-red-500 dark:text-red-400 mb-4">
          <i class="fa fa-exclamation-triangle text-2xl"></i>
        </view>
        <text class="text-red-500 dark:text-red-400">{{ errorMsg }}</text>
        <button 
          class="mt-4 px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors"
          @click="loadServers"
        >
          重试
        </button>
      </view>

      <!-- 空数据提示 -->
      <view v-if="servers.length === 0 && !loading && !errorMsg" class="py-20 text-center">
        <view class="inline-flex items-center justify-center w-20 h-20 rounded-full bg-gray-100 dark:bg-gray-800 text-gray-400 mb-4">
          <i class="fa fa-server text-3xl"></i>
        </view>
        <text class="block text-gray-500 dark:text-gray-400 text-lg mb-2">暂无服务器数据</text>
        <text class="block text-gray-400 dark:text-gray-500 mb-6 max-w-md mx-auto">添加您的第一个Tshock服务器，开始便捷管理体验</text>
        <button 
          class="px-6 py-3 bg-primary text-white rounded-lg shadow-lg hover:shadow-xl hover:bg-primary/90 transition-all transform hover:-translate-y-1"
          @click="showAddModal = true"
        >
          <i class="fa fa-plus mr-2"></i>立即添加服务器
        </button>
      </view>

      <!-- 服务器卡片网格 -->
      <view class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" v-if="filteredServers.length > 0 && !loading && !errorMsg">
        <view class="server-card" v-for="server in filteredServers" :key="server.uuid">
          <view class="bg-white dark:bg-gray-800 rounded-xl shadow-md overflow-hidden hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
            <!-- 服务器Banner -->
            <view class="banner-container h-40 overflow-hidden relative bg-gray-100 dark:bg-gray-700">
              <image 
                v-if="server.bannerUrl" 
                :src="server.bannerUrl" 
                mode="aspectFill"
                class="w-full h-full object-cover transition-transform duration-700 hover:scale-110"
                :alt="`${server.serverName}的横幅图片`"
              />
              <view v-else class="w-full h-full flex items-center justify-center text-gray-400">
                <i class="fa fa-image text-4xl"></i>
              </view>
              <!-- 状态指示器 -->
              <view class="absolute top-3 right-3 w-3 h-3 rounded-full bg-green-500 shadow-md" :class="{ 'bg-red-500': !server.online }"></view>
            </view>
            
            <!-- 服务器基本信息 -->
            <view class="p-5">
              <view class="flex items-start justify-between mb-3">
                <text class="text-lg font-bold">{{ server.serverName }}</text>
                <text class="text-xs text-gray-500 dark:text-gray-400 bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded-full">
                  ID: {{ server.id || server.uuid.slice(0, 6) }}
                </text>
              </view>
              
              <view class="space-y-2 text-sm">
                <view class="flex items-center text-gray-600 dark:text-gray-400">
                  <i class="fa fa-globe mr-2 text-primary w-4 text-center"></i>
                  <text>{{ server.serverIp }}:{{ server.serverPort }}</text>
                </view>
                <view class="flex items-center text-gray-600 dark:text-gray-400">
                  <i class="fa fa-key mr-2 text-primary w-4 text-center"></i>
                  <text>REST: {{ server.serverRest ? server.serverRest : '未设置' }}</text>
                </view>
                <view class="flex items-center text-gray-600 dark:text-gray-400">
                  <i class="fa fa-user mr-2 text-primary w-4 text-center"></i>
                  <text>创建者: {{ server.openid || '未知' }}</text>
                </view>
              </view>
              
              <!-- 操作按钮 -->
              <view class="flex justify-end mt-4 space-x-2">
                <button 
                  class="text-primary hover:text-primary/80 px-3 py-1.5 rounded-lg text-sm transition-colors"
                  @click="viewServerDetail(server)"
                >
                  <i class="fa fa-eye mr-1"></i>详情
                </button>
                <button 
                  class="bg-blue-50 text-blue-600 hover:bg-blue-100 dark:bg-blue-900/30 dark:text-blue-400 px-3 py-1.5 rounded-lg text-sm transition-colors"
                  @click="editServer(server)"
                >
                  <i class="fa fa-edit mr-1"></i>编辑
                </button>
                <button 
                  class="bg-red-50 text-red-600 hover:bg-red-100 dark:bg-red-900/30 dark:text-red-400 px-3 py-1.5 rounded-lg text-sm transition-colors"
                  @click="showDeleteConfirm(server.uuid)"
                >
                  <i class="fa fa-trash mr-1"></i>删除
                </button>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 添加/编辑服务器模态框 -->
    <view v-if="showAddModal" class="modal-mask" @click="showAddModal = false">
      <view class="modal-container" @click.stop>
        <view class="modal-content bg-white dark:bg-gray-800 rounded-xl p-6 shadow-2xl max-h-[90vh] overflow-y-auto">
          <text class="text-xl font-bold mb-5 block flex items-center">
            <i class="fa" :class="isEditMode ? 'fa-edit text-blue-500 mr-2' : 'fa-plus-circle text-green-500 mr-2'"></i>
            {{ isEditMode ? '编辑服务器' : '添加服务器' }}
          </text>
          
          <view class="form-group mb-4">
            <text class="form-label">服务器名称 *</text>
            <input 
              type="text" 
              v-model="formData.serverName"
              placeholder="请输入服务器名称"
              class="form-input"
            />
          </view>
          
          <view class="form-group mb-4">
            <text class="form-label">服务器IP *</text>
            <input 
              type="text" 
              v-model="formData.serverIp"
              placeholder="请输入IP地址"
              class="form-input"
            />
          </view>
          
          <view class="form-group mb-4">
            <text class="form-label">服务器端口 *</text>
            <input 
              type="number" 
              v-model="formData.serverPort"
              placeholder="请输入端口号"
              class="form-input"
            />
          </view>
          
          <view class="form-group mb-4">
            <text class="form-label">REST接口端口</text>
            <input 
              type="number" 
              v-model="formData.serverRest"
              placeholder="请输入REST端口"
              class="form-input"
            />
          </view>
          
          <view class="form-group mb-4">
            <text class="form-label">REST接口密钥</text>
            <input 
              type="text" 
              v-model="formData.serverRestKey"
              placeholder="请输入REST密钥"
              class="form-input"
            />
          </view>
          
          <view class="form-group mb-4">
            <text class="form-label">横幅URL</text>
            <input 
              type="text" 
              v-model="formData.bannerUrl"
              placeholder="例如: /api/tshock/file/access/banner/xxx.gif"
              class="form-input"
            />
            <text class="text-xs text-gray-500 dark:text-gray-400 mt-1 block">支持图片和GIF格式</text>
          </view>
          
          <view class="form-group mb-4">
            <text class="form-label">服务器描述</text>
            <textarea 
              v-model="formData.serverDescription"
              placeholder="请输入服务器描述"
              class="form-textarea"
              rows="3"
            ></textarea>
          </view>
          
          <view class="form-actions flex justify-end space-x-3 mt-6 pt-4 border-t border-gray-200 dark:border-gray-700">
            <button 
              class="px-5 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
              @click="showAddModal = false"
            >
              取消
            </button>
            <button 
              class="px-5 py-2.5 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors shadow-md hover:shadow-lg transform hover:-translate-y-0.5 transition-transform"
              @click="submitServerForm"
            >
              {{ isEditMode ? '更新服务器' : '添加服务器' }}
            </button>
          </view>
        </view>
      </view>
    </view>

    <!-- 删除确认框 -->
    <view v-if="showDeleteModal" class="modal-mask" @click="showDeleteModal = false">
      <view class="modal-container delete-modal" @click.stop>
        <view class="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-2xl text-center">
          <view class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-red-100 dark:bg-red-900/30 text-red-500 dark:text-red-400 mb-5 mx-auto">
            <i class="fa fa-exclamation-circle text-2xl"></i>
          </view>
          <text class="text-xl font-bold mb-3 block">确认删除</text>
          <text class="text-gray-600 dark:text-gray-400 mb-6 block">
            您确定要删除该服务器吗？此操作不可撤销，所有相关数据将被永久删除。
          </text>
          <view class="flex justify-center space-x-3">
            <button 
              class="px-5 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
              @click="showDeleteModal = false"
            >
              取消
            </button>
            <button 
              class="px-5 py-2.5 bg-red-500 text-white rounded-lg hover:bg-red-600 transition-colors shadow-md hover:shadow-lg"
              @click="confirmDelete"
            >
              确认删除
            </button>
          </view>
        </view>
      </view>
    </view>

    <!-- 服务器详情页 -->
    <view v-if="showDetailModal" class="detail-mask" @click="showDetailModal = false">
      <view class="detail-container" @click.stop>
        <view class="detail-content bg-white dark:bg-gray-800 rounded-t-2xl p-6 shadow-2xl">
          <view class="flex justify-between items-center mb-6">
            <text class="text-xl font-bold">服务器详情</text>
            <button @click="showDetailModal = false" class="text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 w-8 h-8 flex items-center justify-center rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
              <i class="fa fa-times"></i>
            </button>
          </view>
          
          <view v-if="currentServer">
            <!-- 详情页Banner -->
            <view class="banner-container h-56 rounded-xl overflow-hidden mb-6 bg-gray-100 dark:bg-gray-700">
              <image 
                v-if="currentServer.bannerUrl" 
                :src="currentServer.bannerUrl" 
                mode="aspectFill"
                class="w-full h-full object-cover"
                :alt="`${currentServer.serverName}的横幅图片`"
              />
              <view v-else class="w-full h-full flex items-center justify-center text-gray-400">
                <i class="fa fa-image text-5xl"></i>
              </view>
            </view>
            
            <view class="text-center mb-8">
              <text class="text-2xl font-bold">{{ currentServer.serverName }}</text>
              <view class="inline-flex items-center mt-2 px-3 py-1 rounded-full text-sm bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400">
                <i class="fa fa-circle text-xs mr-1"></i>
                在线
              </view>
            </view>
            
            <view class="detail-list space-y-1">
              <view class="detail-item">
                <text class="detail-label">服务器ID:</text>
                <text class="detail-value font-mono">{{ currentServer.id || currentServer.uuid }}</text>
              </view>
              <view class="detail-item">
                <text class="detail-label">IP地址:</text>
                <text class="detail-value font-mono">{{ currentServer.serverIp }}:{{ currentServer.serverPort }}</text>
              </view>
              <view class="detail-item">
                <text class="detail-label">REST接口:</text>
                <text class="detail-value">
                  {{ currentServer.serverRest ? currentServer.serverRest : '未设置' }}
                  <text v-if="currentServer.serverRestKey" class="ml-2 px-2 py-0.5 bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400 rounded text-xs">已配置密钥</text>
                </text>
              </view>
              <view class="detail-item">
                <text class="detail-label">创建者:</text>
                <text class="detail-value">{{ currentServer.openid || '未知' }}</text>
              </view>
              <view class="detail-item">
                <text class="detail-label">横幅类型:</text>
                <text class="detail-value">
                  {{ currentServer.bannerUrl && currentServer.bannerUrl.endsWith('.gif') ? 'GIF动画' : '静态图片' }}
                  <text v-if="!currentServer.bannerUrl">未设置</text>
                </text>
              </view>
              <view class="detail-item">
                <text class="detail-label">描述:</text>
                <text class="detail-value whitespace-pre-line">{{ currentServer.serverDescription || '无描述信息' }}</text>
              </view>
            </view>
            
            <view class="mt-8 grid grid-cols-2 gap-4">
              <button 
                class="py-3 border border-primary text-primary rounded-lg hover:bg-primary/5 transition-colors"
                @click="showDetailModal = false"
              >
                <i class="fa fa-arrow-left mr-2"></i>返回列表
              </button>
              <button 
                class="py-3 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors shadow-md hover:shadow-lg"
                @click="showDetailModal = false; editServer(currentServer)"
              >
                <i class="fa fa-edit mr-2"></i>编辑服务器信息
              </button>
            </view>
          </view>
          
          <view v-else class="text-center py-10 text-gray-500 dark:text-gray-400">
            <i class="fa fa-exclamation-circle text-2xl mb-2"></i>
            <text>加载服务器详情失败</text>
            <button 
              class="mt-4 px-4 py-2 bg-primary/10 text-primary rounded-lg hover:bg-primary/20 transition-colors"
              @click="showDetailModal = false"
            >
              返回
            </button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { NEW_URL_DEV } from '@/common/config.js'

export default {
  data() {
    return {
      // 服务器列表数据
      servers: [],
      filteredServers: [],
      loading: false,
      errorMsg: '',
      searchKey: '',
      sortOption: 'name-asc',
      
      // 模态框控制
      showAddModal: false,
      showDeleteModal: false,
      showDetailModal: false,
      
      // 表单数据
      formData: {
        id: '',
        uuid: '',
        openid: '123456',
        serverName: '',
        serverIp: '',
        serverPort: '',
        serverRest: '',
        serverRestKey: '',
        serverDescription: '',
        bannerUrl: '' // 新增bannerUrl字段
      },
      
      // 状态控制
      isEditMode: false,
      currentServer: null,
      deleteUuid: '',
      searchTimer: null
    }
  },
  
  onLoad() {
    // 加载服务器列表
    this.loadServers()
  },
  
  methods: {
    // 加载服务器列表
    async loadServers() {
      this.loading = true
      this.errorMsg = ''
      try {
        const res = await uni.request({
          url: `${NEW_URL_DEV}/api/tshock/server`,
          method: 'GET'
        })
        
        if (res.data && res.data.success) {
          this.servers = res.data.data.map(server => ({
            ...server,
            // 处理bannerUrl，确保格式正确
            bannerUrl: server.bannerUrl?.startsWith('/') ? server.bannerUrl : `/api/tshock/file/access/banner/${server.bannerUrl}`,
            // 模拟在线状态
            online: Math.random() > 0.2
          }))
          this.filteredServers = [...this.servers]
          this.sortServers()
        } else {
          this.errorMsg = res.data.message || '加载服务器列表失败'
        }
      } catch (err) {
        this.errorMsg = '网络错误，无法加载服务器列表'
        console.error('加载服务器失败:', err)
      } finally {
        this.loading = false
      }
    },
    
    // 清空搜索
    clearSearch() {
      this.searchKey = ''
      this.filterServers()
    },
    
    // 搜索防抖
    debounceSearch() {
      clearTimeout(this.searchTimer)
      this.searchTimer = setTimeout(() => {
        this.filterServers()
      }, 300)
    },
    
    // 过滤服务器列表
    filterServers() {
      if (!this.searchKey) {
        this.filteredServers = [...this.servers]
        this.sortServers()
        return
      }
      
      const key = this.searchKey.toLowerCase()
      this.filteredServers = this.servers.filter(server => 
        server.serverName.toLowerCase().includes(key) || 
        server.serverIp.toLowerCase().includes(key)
      )
      this.sortServers()
    },
    
    // 排序服务器列表
    sortServers() {
      switch(this.sortOption) {
        case 'name-asc':
          this.filteredServers.sort((a, b) => a.serverName.localeCompare(b.serverName))
          break
        case 'name-desc':
          this.filteredServers.sort((a, b) => b.serverName.localeCompare(a.serverName))
          break
        case 'recent':
          this.filteredServers.sort((a, b) => new Date(b.createdAt || 0) - new Date(a.createdAt || 0))
          break
      }
    },
    
    // 查看服务器详情
    viewServerDetail(server) {
      this.currentServer = server
      this.showDetailModal = true
    },
    
    // 编辑服务器
    editServer(server) {
      this.isEditMode = true
      this.formData = { ...server }
      this.showAddModal = true
    },
    
    // 显示删除确认
    showDeleteConfirm(uuid) {
      this.deleteUuid = uuid
      this.showDeleteModal = true
    },
    
    // 确认删除
    async confirmDelete() {
      if (!this.deleteUuid) return
      
      this.loading = true
      try {
        const res = await uni.request({
          url: `${NEW_URL_DEV}/api/tshock/server/${this.deleteUuid}`,
          method: 'DELETE'
        })
        
        if (res.data && res.data.success) {
          uni.showToast({
            title: '删除成功',
            icon: 'success'
          })
          this.showDeleteModal = false
          this.loadServers() // 重新加载列表
        } else {
          uni.showToast({
            title: res.data.message || '删除失败',
            icon: 'none'
          })
        }
      } catch (err) {
        uni.showToast({
          title: '网络错误，删除失败',
          icon: 'none'
        })
        console.error('删除服务器失败:', err)
      } finally {
        this.loading = false
      }
    },
    
    // 提交服务器表单
    async submitServerForm() {
      // 表单验证
      if (!this.formData.serverName || !this.formData.serverIp || !this.formData.serverPort) {
        return uni.showToast({
          title: '请填写必填字段',
          icon: 'none'
        })
      }
      
      this.loading = true
      try {
        if (this.isEditMode) {
          // 更新服务器
          const res = await uni.request({
            url: `${NEW_URL_DEV}/api/tshock/server/${this.formData.uuid}`,
            method: 'PUT',
            data: this.formData
          })
          
          if (res.data && res.data.success) {
            uni.showToast({ title: '更新成功', icon: 'success' })
            this.showAddModal = false
            this.loadServers()
          } else {
            uni.showToast({
              title: res.data.message || '更新失败',
              icon: 'none'
            })
          }
        } else {
          // 创建新服务器
          this.formData.uuid = 'server-' + Date.now() + Math.random().toString(36).substr(2, 9)
          this.formData.createdAt = new Date().toISOString()
          
          const res = await uni.request({
            url: `${NEW_URL_DEV}/api/tshock/server`,
            method: 'POST',
            data: this.formData
          })
          
          if (res.data && res.data.success) {
            uni.showToast({ title: '添加成功', icon: 'success' })
            this.showAddModal = false
            this.loadServers()
            // 重置表单
            this.formData = {
              id: '',
              uuid: '',
              openid: '123456',
              serverName: '',
              serverIp: '',
              serverPort: '',
              serverRest: '',
              serverRestKey: '',
              serverDescription: '',
              bannerUrl: ''
            }
          } else {
            uni.showToast({
              title: res.data.message || '添加失败',
              icon: 'none'
            })
          }
        }
      } catch (err) {
        uni.showToast({
          title: '网络错误，操作失败',
          icon: 'none'
        })
        console.error('提交服务器表单失败:', err)
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

<style scoped>
/* 基础样式 */
.container {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

/* 导航栏样式 */
.navbar {
  position: sticky;
  top: 0;
  z-index: 10;
}

/* 服务器卡片样式 */
.server-card {
  animation: fadeIn 0.5s ease forwards;
  opacity: 0;
}

.server-card:nth-child(1) { animation-delay: 0.1s; }
.server-card:nth-child(2) { animation-delay: 0.2s; }
.server-card:nth-child(3) { animation-delay: 0.3s; }
.server-card:nth-child(4) { animation-delay: 0.4s; }
.server-card:nth-child(5) { animation-delay: 0.5s; }
.server-card:nth-child(6) { animation-delay: 0.6s; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 加载动画 */
.loading-spinner {
  width: 24px;
  height: 24px;
  border: 3px solid #eee;
  border-top-color: #3B82F6;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* 模态框样式 */
.modal-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 100;
  backdrop-filter: blur(2px);
}

.modal-container {
  width: 90%;
  max-width: 550px;
  animation: popupIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes popupIn {
  from { opacity: 0; transform: scale(0.95) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.delete-modal {
  max-width: 400px;
}

/* 表单样式 */
.form-group {
  display: flex;
  flex-direction: column;
}

.form-label {
  font-size: 14px;
  color: #333;
  margin-bottom: 6px;
  font-weight: 500;
}

.form-input, .form-textarea {
  padding: 12px 14px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 15px;
  background-color: #fff;
  transition: border-color 0.2s;
}

.form-input:focus, .form-textarea:focus {
  border-color: #3B82F6;
  outline: none;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.form-textarea {
  resize: none;
}

/* 详情页样式 */
.detail-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 100;
  backdrop-filter: blur(2px);
}

.detail-container {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.detail-content {
  max-height: 90vh;
  overflow-y: auto;
  animation: slideUp 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes slideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

.detail-list {
  background-color: #f9fafb;
  border-radius: 10px;
  overflow: hidden;
}

.detail-item {
  display: flex;
  padding: 14px 16px;
  border-bottom: 1px solid #eee;
}

.detail-item:last-child {
  border-bottom: none;
}

.detail-label {
  width: 100px;
  color: #666;
  font-size: 14px;
  font-weight: 500;
}

.detail-value {
  flex: 1;
  font-size: 14px;
  color: #333;
  word-break: break-all;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .detail-item {
    flex-direction: column;
  }
  
  .detail-label {
    width: auto;
    margin-bottom: 4px;
    display: block;
  }
}

/* 深色模式适配 */
.dark .form-label {
  color: #ddd;
}

.dark .form-input, .dark .form-textarea {
  border-color: #666;
  background-color: #444;
  color: #fff;
}

.dark .detail-list {
  background-color: #444;
}

.dark .detail-item {
  border-bottom-color: #555;
}

.dark .detail-label {
  color: #aaa;
}

.dark .detail-value {
  color: #ddd;
}
</style>
